<!-- 报警详情 -->
<template>
	<view class="wrap" v-show="alarmType">
		<fa-navbar title="报警详情"></fa-navbar>
		<!-- 资产信息（设备故障则无） -->
		<view class="assets-info" v-if="alarmType !== 2">
			<view class="title item-border">
				{{alarmDetail.EpcId}}
			</view>
			<view class="info">
				<image :src="imgUrl"></image>
				<view style="width: 73%;">
					<view style="padding-bottom: 6rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #2A2A2A;">{{alarmDetail.AssetName}}</view>
					<view style="padding-bottom: 12rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #4F5053;">{{alarmDetail.OrgName}}</view>
					<view class="flex-between" style="font-size: 24rpx;
														font-family: PingFangSC-Regular, PingFang SC;
														font-weight: 400;
														color: #4F5053;">
						<view>{{alarmDetail.AssetTypeText}}</view>
						<view>{{alarmDetail.Num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 报警信息 -->
		<view class="alarm-info">
			<view class="tips">报警信息</view>
			<view class="item-border flex-between">
				<view>
					<image :src="alarmDetail.Level === 'FASG_RISK_LEVEL_0002' ? '../../static/images/alarm-mid.png' : '../../static/images/alarm-high.png'" ></image>
					<text style="font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;" :style="`color: ${alarmDetail.Level === 'FASG_RISK_LEVEL_0002' ? '#FDB656' : '#E55D5D'}`">{{alarmDetail.LevelText}}</text>
				</view>
				<view style="font-size: 24rpx;
					border-radius: 4rpx;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 10rpx;
					margin-top: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;" :style="alarmDetail.IsHandle ? 'background-color: #eaf1fc;color: #2E73E5;' : 'background-color: #fceeee;color: #E55D5D;'">{{alarmDetail.IsHandle ? '已处理' : '待处理'}}</view>
			</view>
			<view class="item-border">
				<text class="label">报警时间</text>
				<text class="content">{{alarmDetail.CreateTime | dateFormat}}</text>
			</view>
			<view class="item-border">
				<text class="label">报警类型</text>
				<text class="content">{{alarmDetail.AlarmTypeText}}</text>
			</view>
			<view class="item-border" :style="alarmType === 1 ? 'border-bottom: none;' : ''">
				<text class="label">报警编号</text>
				<text class="content text-ellipsis" style="">{{alarmId}}</text>
			</view>
			<!-- 设备故障显示 -->
			<view class="item-border" v-if="alarmType === 2">
				<text class="label">设备名称</text>
				<text class="content">{{alarmDetail.DeviceName}}</text>
			</view>
			<view class="item-border" v-if="alarmType === 2">
				<text class="label">设备ID</text>
				<text class="content">{{alarmDetail.DeviceId}}</text>
			</view>
			<view class="item-border" style="border-bottom: none;" v-if="alarmType === 2">
				<text class="label">所属房产</text>
				<text class="content">{{alarmDetail.OrgName}}</text>
			</view>
			<!-- 转移超时显示 -->
			<view class="expired-tips" v-if="alarmType === 3">
				<view style="font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							padding-bottom: 20rpx;
							color: #2A2A2A;">资产转移已超过时限，请尽快转移</view>
				<view><text>转移已经超时：</text><text style="color: #eb8282;">{{transferOvertime}}</text></view>
			</view>
		</view>
		<!-- 故障描述（设备故障有） -->
		<view class="describe" v-if="alarmType === 2">
			<view class="tips">详情</view>
			<view class="content" style="width: 100%;">{{alarmDetail.Describe || "设备发生故障，请联系厂商！"}}</view>
		</view>
		<!-- 处理信息（处理后有） -->
		<view class="operate-info" v-if="alarmDetail.IsHandle">
			<view class="tips">处理信息</view>
			<view class="item-border" >
				<text class="label">处理方式</text>
				<text class="content">{{alarmHandleDetail.HandleTypeText}}</text>
			</view>
			<view class="item-border" >
				<text class="label">处理时间</text>
				<text class="content">{{alarmDetail.IgnoreTime || alarmHandleDetail.HandleTime | dateFormat}}</text>
			</view>
			<view class="item-border" >
				<text class="label">处理人</text>
				<text class="content">{{alarmHandleDetail.HandleUserName || '暂无'}}</text>
			</view>
<!-- 			<view class="item-border" v-show="handleDetail.TargetOrgName">
				<text class="label">目标房产</text>
				<text class="content">{{handleDetail.TargetOrgName}}</text>
			</view>
			<view class="item-border" v-show="handleDetail.TransferStateText">
				<text class="label">状态</text>
				<text class="content">{{handleDetail.TransferStateText}}</text>
			</view> -->
			<view class="item-border" style="border-bottom: none;" v-show="handleDetail.Describe">
				<text class="label">备注</text>
				<text class="content">{{handleDetail.Describe || ''}}</text>
			</view>
		</view>
		<!-- 转移进度(只有转移超时显示) -->
		<view class="transfer-progress" v-if="alarmType === 3 && !alarmDetail.IsHandle">
			<view class="tips">转移进度</view>
			<!-- 进度条 -->
			<view class="progress">
				<view class="dot">
					<view><image src="../../static/images/progress-active.png"></image></view>
					<view class="title">提交转移</view>
					<view class="time">{{handleDetail.CreateTime | dateFormatHideY}}</view>
				</view>
				<view class="line" :class="handleDetail.TransferState !== 'ASSET_TRANSFER_0001' ? 'active' : 'de-active'"></view>
				<view class="dot">
					<view><image :src="handleDetail.TransferState !== 'ASSET_TRANSFER_0001' ? '../../static/images/progress-active.png' : '../../static/images/progress-deactive.png'"></image></view>
					<view class="title">转移出库</view>
					<view class="time" v-show="handleDetail.TransferState !== 'ASSET_TRANSFER_0001'">{{handleDetail.TransferOutTime | dateFormatHideY}}</view>
				</view>
				<view class="line" :class="handleDetail.TransferState === 'ASSET_TRANSFER_0003' ? 'active' : 'de-active'"></view>
				<view class="dot">
					<view><image :src="handleDetail.TransferState === 'ASSET_TRANSFER_0003' ? '../../static/images/progress-active.png' : '../../static/images/progress-deactive.png'"></image></view>
					<view class="title">转移完成</view>
					<view class="time" v-show="handleDetail.TransferState === 'ASSET_TRANSFER_0003'">{{handleDetail.TransferInTime | dateFormatHideY}}</view>
				</view>
			</view>
			<view class="item-border" style="border-bottom: none;">
				<text class="label">操作员</text>
				<text class="content">{{handleDetail.ApplyUserName}}</text>
			</view>
		</view>
		<!-- 转移信息 -->
		<view class="transfer-info" v-if="alarmType === 3 && !alarmDetail.IsHandle">
			<view class="tips">转移信息</view>
			<view class="item-border">
				<text class="label">处置类型</text>
				<text class="content">{{handleDetail.HandleTypeText}}</text>
			</view>
			<view class="item-border">
				<text class="label">当前房产</text>
				<text class="content">{{handleDetail.OrgName}}</text>
			</view>
			<view class="item-border">
				<text class="label">目标房产</text>
				<text class="content">{{handleDetail.TargetOrgName}}</text>
			</view>
			<view class="item-border">
				<text class="label">完成时间</text>
				<text class="content">{{handleDetail.DayLimit}}天</text>
			</view>
			<view class="item-border" style="border-bottom: none;">
				<text class="label">备注</text>
				<text class="content">{{handleDetail.Describe}}</text>
			</view>
		</view>
		<view class="gap"></view>
		<!-- 底部操作按钮 -->
		<view class="footer" v-if="!alarmDetail.IsHandle">
			<view :class="alarmType === 2 ? 'right expand' : 'left'" @click="doIngore">忽略报警</view>
			<!-- 转移超时并且资产状态为待转移，则可以取消转移，否则只能处置 -->
			<view class="middle" v-if="alarmType === 3 && handleDetail.TransferState === 'ASSET_TRANSFER_0001'" @click="cancelTransfer">取消转移</view>
			<view class="right" :class="alarmType === 3 && handleDetail.TransferState === 'ASSET_TRANSFER_0001' ? 'shrink' : ''" v-if="alarmType !== 2" @click="toHandle">处置资产</view>
		</view>
		<u-modal v-model="modal.show" :content="modal.content" title="提示" show-cancel-button cancel-text="再想想" @confirm="modal.confirm"></u-modal>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	export default {
		components: {faNavbar},
		data() {
			return {
				alarmDetail: {},
				handleDetail: {},
				alarmType: 0,
				modal: {
					show: false,
					content: "",
					cancel: () => {this.modal.show = false},
					confirm: () => {this.modal.show = false}
				},
				imgUrl: "/static/images/nopic.png",
				alarmHandleDetail: {}
			}
		},
		onLoad(options) {
			this.getDetail(options.detailId);
			if (options.imgUrl) {
				this.imgUrl = options.imgUrl;
			}
		},
		filters: {
			dateFormatHideY(val) {
				if (!val) {
					return "";
				}
				let d = new Date(val);
				let now = d.getMonth() < 10 ? `0${d.getMonth()}` : d.getMonth();
				now += "-";
				now += d.getDay() < 10 ? `0${d.getDay()}` : d.getDay();
				now += " ";
				now += d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
				now += ":";
				now += d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
				return now;
			}
		},
		computed: {
			transferOvertime() {
				if (this.handleDetail.CreateTime) {
					let expired = this.handleDetail.CreateTime + 1000 * 60 * 60 * 24 * this.handleDetail.DayLimit;
					let overtime = Math.floor((new Date().getTime() - expired) / 1000);
					let days = Math.floor(overtime / (60 * 60 * 24));
					let hours = Math.floor((overtime % (60 * 60 * 24)) / (60 * 60));
					let minutes = Math.floor((overtime % (60 * 60)) / 60);
					let seconds = overtime % 60;
					let overtimeStr = "";
					if (days > 0) {
						overtimeStr += `${days}天`;
					}
					if (hours > 0) {
						overtimeStr += `${hours}小时`;
					}
					if (minutes > 0) {
						overtimeStr += `${minutes}分钟`;
					}
					if (seconds > 0) {
						overtimeStr += `${seconds}秒`;
					}
					return overtimeStr;
				} else {
					return "";
				}
			},
			alarmId() {
				if (this.alarmDetail.AlarmGuid) {
					return this.alarmDetail.AlarmGuid.replace(/-/g, "");
				}
				return "";
			},
			handleType() {
				if (this.alarmDetail) {
					if (this.alarmDetail.Ignore) {
						return "忽略";
					}
					if (this.alarmDetail.ObjectGuid === this.alarmDetail.HandleGuid) {
						return "取消转移";
					}
				}
				
				return "资产处置";
			}
		},
		methods: {
			doIngore() {
				this.modal.content = "忽略后将不再提醒，您确认要忽略该报警吗？";
				this.modal.confirm = () => {
					this.$api.ignoreAlarm({"ID": this.alarmDetail.AlarmGuid}).then(res => {
						if (res.code !== 0) {
							uni.showToast({title: res.message || '提交失败，请稍后再试', icon: "none"});
						} else {
							uni.showToast({title: "报警已忽略"});
							this.getDetail(this.alarmDetail.AlarmGuid);
						}
					}).catch(err => {});
					this.modal.show = false;
				};
				this.modal.show = true;
			},
			toHandle() {
				uni.redirectTo({url: `../handle/assetHandle?guid=${this.alarmDetail.AssetGuid}&alarmGuid=${this.alarmDetail.AlarmGuid}&handleGuid=${this.alarmDetail.ObjectGuid}`});
			},
			getDetail(id) {
				this.$api.getAlarmDetail({"ID": id}).then(res => {
					if (res.code !== 0) {
						uni.showToast({title: res.message || "请求失败", icon: "none"});
					} else {
						this.alarmDetail = res.data || {};			// 1 非法带出  2 设备故障  3 转移超时（换成数字方便使用）
						this.alarmType = this.alarmDetail.AlarmType === 'FASG_WARNING_TYPE_0001' ? 1 : 
							this.alarmDetail.AlarmType === 'FASG_WARNING_TYPE_0002' ? 2 : 3;
						// 如果报警类型为转移超时并且未处理则查询转移相关信息
						if (res.data.ImgUrl) {
							this.imgUrl = res.data.ImgUrl;
						}
						if (this.alarmType === 3 || (this.alarmDetail.IsHandle && !this.alarmDetail.Ignore)) {
							this.$api.getAlarmHandleInfo({"ID": this.alarmDetail.ObjectGuid}).then(res => {
								uni.hideToast();
								if (res.code !== 0) {
								} else {
									this.handleDetail = res.data;
								}
							}).catch(err => {});
						}
						if (this.alarmDetail.IsHandle) {
							this.$api.getAlarmHandleDetail({"ID": this.alarmDetail.AlarmGuid}).then(res => {
								this.alarmHandleDetail = res.data;
							});
						}
					}
				}).catch(err => {});
			},
			cancelTransfer() {
				this.modal.content = "确认后转移计划将中止";
				this.modal.confirm = () => {
					this.$api.cancelTransfer({"ID": this.handleDetail.HandleGuid}).then(res => {
						if (res.code === 0) {
							this.modal.show = false;
							this.getDetail(this.alarmDetail.AlarmGuid);
						}
					});
				};
				this.modal.show = true;
				// uni.navigateTo({url: `../manage/itemAssetTransfer?handleGuid=${this.handleDetail.HandleGuid}&guid=${this.alarmDetail.AssetGuid}&showPopup=true`});
			}
		},
		
		filters: {

		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		min-height: 100vh;
		background: #F6F8FB;
		.assets-info {
			width: 100%;
			height: 260rpx;
			padding: 0 40rpx 20rpx;
			margin-top: 30rpx;
			background-color: #FFFFFF;
			.title {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 24rpx;
				font-family: Roboto-Regular, Roboto;
				font-weight: 400;
				color: #999999;
			}
			.info {
				width: 100%;
				padding: 20rpx;
				display: flex;
				flex-wrap: wrap;
				image {
					width: 128rpx;
					height: 128rpx;
					margin-right: 30rpx;
				}
			}
		}
		.alarm-info {
			margin-top: 50rpx;
			padding: 20rpx 40rpx ;
			background-color: #FFFFFF;
			
			image {
				width: 54rpx;
				height: 54rpx;
				margin-right: 20rpx;
				vertical-align: middle;
			}
		}
		.tips {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #2A2A2A;
			margin-bottom: 20rpx;
		}
		.item-border {
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 20rpx;
			border-bottom: 2rpx solid #ECECF0;
			overflow: hidden;
		}
		.label {
			float: left;
			width: 20%;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #2A2A2A;
			margin-right: 40rpx;
		}
		.content {
			float: left;
			width: 65%;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #2A2A2A;
		}
		.expired-tips {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #2A2A2A;
			padding-left: 20rpx;
		}
		.footer {
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			font-size: 32rpx;
			line-height: 120rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			.left {
				display: inline-block;
				text-align: center;
				width: 35%;
				color: #2A2A2A;
			}
			.middle {
				border-radius: 20px;
				border: 2rpx solid #3176E6;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				display: inline-block;
				color: #3176E6;
				width: 25%;
				margin-right: 30rpx;
			}
			.right {
				display: inline-block;
				width: 60%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin-top: 20rpx;
				color: #FFFFFF;
				background: linear-gradient(310deg, #5BABF4 0%, #2E73E5 100%);
				border-radius: 20px;
			}
			.shrink {
				width: 28%;
			}
			.expand {
				margin-left: 5%;
				width: 90%;
			}
		}
		.describe {
			margin-top: 30rpx;
			width: 100%;
			height: 520rpx;
			background-color: #FFFFFF;
			padding: 20rpx 40rpx;
			.content {
				height: 400rpx;
				background: #F6F8FB;
				border-radius: 4rpx;
				border: 2rpx solid #DADADA;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2A2A2A;
				overflow-y: auto;
				padding: 20rpx;
			}
		}
		.operate-info {
			margin-top: 30rpx;
			padding: 20rpx 40rpx;
			background-color: #FFFFFF;
		}
		.transfer-progress {
			margin-top: 30rpx;
			padding: 20rpx 40rpx;
			background-color: #FFFFFF;
			.progress {
				width: 100%;
				height: 220rpx;
				margin: 0 auto;
				padding: 20rpx 0;
				display: flex;
				flex-wrap: wrap;
				border-bottom: 2rpx solid #ECECF0;
				image {
					width: 80rpx;
					height: 80rpx;
				}
				.dot {
					height: 100%;
					width: 140rpx;
					text-align: center;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					.title {
						font-size: 24rpx;
						color: #333333;
					}
					.time {
						font-size: 22rpx;
						color: #666666;
					}
				}
				.line {
					margin: 40rpx -50rpx;
					height: 4rpx;
					width: 200rpx;
				}
			}
			.active {
				background-color: #3075E6;;
			}
			.de-active {
				background-color: #EEF4FF;;
			}
		}
		.transfer-info {
			margin-top: 30rpx;
			padding: 20rpx 40rpx;
			background-color: #FFFFFF;
		}
		.gap {
			height: 180rpx;
		}
	}
</style>
